<template>
  <div class="powerpoint" :style="{ width: `${width}%` }">
    <el-carousel :interval="3000" arrow="never" indicator-position="none" :pause-on-hover="false">
      <el-carousel-item v-for="(image, index) in images" :key="index">
        <img :src="image" class="slideshow-image" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup>

const props = defineProps({
  images: {
    type: Array,
    default: () => [],
  },
  width: {
    type: Number,
    default: 100,
  },
});
</script>

<style scoped lang="scss">
.powerpoint {
  width: 100%;
  height: 100%;
  padding: 0.05rem;
  :deep(.el-carousel) {
    width: 100%;
    height: 100%;
  }
  :deep(.el-carousel__container) {
    width: 100%;
    height: 100%;
  }
}
.slideshow-image {
  width: 100%;
  height: 100%;
  border-radius: 0.08rem;
}
</style>
